<template>
  <div class="channel_edit">
    <van-cell class="edit_top" center :border="false">
      <div slot="title">我的频道</div>
      <van-button
        type="danger"
        round
        plain
        class="edit_btn"
        @click="isEdit = !isEdit"
      >
        {{ isEdit ? "完成" : "编辑" }}
      </van-button>
    </van-cell>
    <van-grid :gutter="10" class="grid_edit_wrap">
      <van-grid-item
        v-for="(item, index) in UserChannel"
        :key="index"
        :text="item.name"
        :icon="isEdit && index !== 0 ? 'clear' : ''"
        @click="handleChooseClick(item, index)"
        class="grid_edit_item"
        :class="{ active: index === active }"
      />
    </van-grid>

    <van-cell center :border="false">
      <div slot="title">频道推荐</div>
    </van-cell>
    <van-grid :gutter="10" class="grid_wrap">
      <van-grid-item
        v-for="(item, index) in recommendChannells"
        :key="index"
        :text="item.name"
        class="grid_item"
        @click="handleAddChannells(item)"
      />
    </van-grid>
  </div>
</template>

<script>
import {
  getUserChannels,
  getAllChannels,
  addUserChannels,
  deleteUserChannels,
} from "@/request/home";
import { mapState } from "vuex";

export default {
  props: {
    active: {
      type: Number,
    },
  },
  data() {
    return {
      UserChannel: [],
      AllChannels: [],
      isEdit: false,
    };
  },
  created() {
    this._getUserChannels();
    this._getAllChannels();
  },
  computed: {
    ...mapState(["user"]),
    recommendChannells() {
      return this.AllChannels.filter((all) => {
        return !this.UserChannel.find((user) => {
          return all.id === user.id;
        });
      });
    },
  },
  methods: {
    async _getUserChannels() {
      const channels = [];
      if (this.user) {
        const { data } = await getUserChannels();
        this.UserChannel = data.data.channels;
      } else {
        const temp = window.localStorage.setItem(
          "user",
          JSON.stringify(this.UserChannel)
        );
        if (temp) {
          this.UserChannel = temp;
        } else {
          const { data } = await getUserChannels();
          this.UserChannel = data.data.channels;
        }
      }
    },

    async _getAllChannels() {
      const { data } = await getAllChannels();
      this.AllChannels = data.data.channels;
    },
    // 添加
    async handleAddChannells(e) {
      this.UserChannel.push(e);
      // console.log(e);
      // 数据持久化
      if (this.user) {
        await addUserChannels({
          channels: [{ id: e.id, seq: this.UserChannel.length }],
        });
      } else {
        window.localStorage.setItem("user", JSON.stringify(this.UserChannel));
      }
    },
    handleChooseClick(it, i) {
      if (this.isEdit && i !== 0) {
        this.deleteChannel(it, i);
      } else {
        this.switchChannel(i);
      }
    },
    // 删除频道
    async deleteChannel(it, i) {
      if (i <= this.active) {
        this.$emit("updateActive", this.active - 1);
      }
      if (this.user) {
        await deleteUserChannels(it.id);
      } else {
        window.localStorage.setItem("user", JSON.stringify(this.UserChannel));
      }
      this.UserChannel.splice(i, 1);
    },
    // 切换频道
    switchChannel(i) {
      this.$emit("handleChannelEditShow");
      this.$emit("updateActive", i);
    },
  },
};
</script>

<style lang="less" scoped>
.channel_edit {
  .edit_top {
    margin-top: 45px;
  }
  .edit_btn {
    width: 65px;
    height: 30px;
  }
  /deep/.van-grid-item__content--center {
    background-color: #f4f4f4;
    border: none !important;
    .van-grid-item__text {
      color: black;
      margin-top: 0;
    }
  }
  /deep/.grid_edit_item {
    border: none;
    position: relative;
    .van-icon-clear {
      position: absolute;
      right: -5px;
      top: -5px;
      font-size: 20px;
      color: rgb(117, 117, 117);
      z-index: 9;
    }
  }

  .active {
    /deep/.van-grid-item__text {
      color: red;
    }
  }
}
</style>